<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆界面</title>
    <link rel="stylesheet" href="../../static/css/login.css">
    <script src="../../static/js/vue.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            new Vue({
                el: '#login',
                data: {
                    login_title: '登录系统',
                    login_f: true,
                    regisyer_f: false,
                    btnName: '登录',
                    username: '',
                    password: '',
                    password1: '',
                    email: ''
                },
                methods:{
                    aclick:function(event){
                        var li = event.srcElement;
                        if ('登录中心' == li.innerText)
                        {
                            this.login_f = true;
                            this.regisyer_f = false;
                            this.login_title = "登录中心";
                            this.btnName = "登录";
                        }else{
                            this.regisyer_f = true;
                            this.login_f = false;
                            this.login_title = "注册中心";
                            this.btnName = "注册";
                        }
                    },
                    submit:function(event){
                        if(this.login_f)
                        {
                            alert("登录");
                        }else{
                            alert("注册");
                        }
                    },
                    rest:function(event){
                        this.username = '',
                            this.password = '',
                            this.password1 = '',
                            this.email = ''
                    }
                }
            })
        }
    </script>

</head>
<body>
    <div class="div_top"><h1>欢迎进入XXX管理中心</h1></div>
    <div class="div_main" id="login">
        <div class="main_title">
            <a v-on:click="aclick" v-bind:class="{'active': login_f}" href="#">登录中心</a>
            <a v-on:click="aclick" v-bind:class="{'active': regisyer_f}" href="#">注册中心</a>
        </div>
        <div class="main_middle">
            <div class="middle_title">
                <h1 v-html="login_title" ></h1>
            </div>
            <div class="middle_main">
                <div v-bind:class="{'input': true,'st': login_f, 'st1':regisyer_f}">
                    <span>用&ensp;户&ensp;名：</span>
                    <span><input type="text" v-model="username"/></span>
                </div>
                <div v-bind:class="{'input': true,'st': login_f, 'st1':regisyer_f}">
                    <span>密&#12288;&#12288;码：</span>
                    <span><input type="password" v-model="password"/></span>
                </div>
                <div v-if="regisyer_f" class="input st1">
                    <span>确认密码：</span>
                    <span><input type="password" v-model="password1"/></span>
                </div>
                <div v-if="regisyer_f" class="input st1">
                    <span>邮&#12288;&#12288;箱：</span>
                    <span><input type="email" v-model="email"/></span>
                </div>
            </div>
        </div>
        <div class="main_bottom">
            <input type="button" value="重置" v-on:click="rest"/>
            <input type="button" v-model="btnName" v-on:click="submit"/>
        </div>
    </div>
</body>
</html>